<template>
<div class="wind1">
  <van-nav-bar
    title="推荐专区"
    left-arrow
    @click-left="onClickLeft"
  />
  <van-tabs @click="onClick" v-model="active">
     <div class="tabs">
      <div class="tab-item" :class="tab==0?'tab-itemactive':''" @click="changetab(0)">推荐</div>
      <div class="tab-item" :class="tab==1?'tab-itemactive':''" @click="changetab(1)">价格</div>
      <div class="tab-item" :class="tab==2?'tab-itemactive':''" @click="changetab(2)">销量</div>
      <!-- <div class="tab-item" :class="tab==3?'tab-itemactive':''" @click="changetab(3)">筛选<van-icon name="filter-o" /></div> -->
    </div>
    <van-tab class="cnetv" title="洗面奶">
      <div class="content">
        <div class="product" v-for="(item, index) in dataList" :key="item.id" @click="goGoods(index)" v-show="item.category_name=='香水'">
            <img :src="item.img">
            <p class="product-title">{{item.name}}</p>
            <div class="product-tip">
                <span>已售{{item.sale}}件</span>
                <span>积分抵扣0%</span>
            </div>
            <div class="product-bottom">
                <span>￥{{item.sell_price}}</span>
                <span>￥{{item.market_price}}</span>
            </div>
        </div>
      </div>
    </van-tab>
    <van-tab title="行李箱">

    </van-tab>
    <van-tab title="身体护理">

    </van-tab>
    <van-tab title="防晒隔离">

    </van-tab>
    <van-tab title="身体护理">

    </van-tab>
    <van-tab title="防晒隔离">

    </van-tab>
  </van-tabs>
</div>
</template>

<script>
import request from '../../static/request.js'

export default {
  name: 'Second-class',
  data () {
    return {
      classname:'',     // 类别
      active: 1,         //  当前页
      dataList:[],      // 商品列表
      tab:0,
      price: 0,       // 0升序 1降序
      sale: 0,        // 0升序 1降序
    }
  },
  mounted(){
    let classname = this.$route.params;
    console.log(classname);
    this.classt();
    this.active = 3;
    this.getList()
  },
  methods: {
    onClick(index, title) {
      this.$toast(title);
    },
    onClickLeft() {
      this.$router.back(-1)
    },
    // 切换tab
    changetab(index){
      this.tab=index
      let obj = {
        keywords: this.keywords
      }
      switch (index) {
        case 0:
        console.log(0)
          this.getList()
          break;
        case 1:
        console.log(1)
          obj.order = 'sell_price'
          if(this.price == 0){
            obj.by = 'asc'  // 升序
            this.price = 1
          }else{
            obj.by = 'desc'  // 降序
            this.price = 0
          }
          this.getOrderList(obj)
          break;
        case 2:
        console.log(2)
          obj.order = 'sale'
          if(this.price == 0){
            obj.by = 'asc'  // 升序
            this.sale = 1
          }else{
            obj.by = 'desc'  // 降序
            this.sale = 0
          }
          this.getOrderList(obj)
          break;
        default:
          break;
      }
    },
    classt(n){
      switch(n)
        {
        case 1:
          return 1;
          break;
        case 2:
          return '';
          break;
        case 3:
          return '';
          break;
        case 4:
          return 2;
          break;
        case 5:
          return '';
          break;
        case 6:
          return 3;
          break;
        default:
        }
    },
    // order是按照价格排序， by是按照销量排序
    getOrderList(obj){
      this.request({
        url: '?controller=theapi&action=goods_list',
        params: obj
      }).then(res=>{
        this.dataList=res.data.data;
      })
    },
    getList(){
      this.request({
        url: '?controller=theapi&action=goods_list',
        params: {
        }
      }).then(res=>{
        console.log(res)
        this.dataList=res.data.data
      })
    },
    goGoods(index){
      console.log(index)
      this.$router.push({
        name: 'ProductDetails',
        params: {
          id: this.dataList[index].id
        }
      })
    }
  },
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .one1{
    width: 100%;
    height: 0.88rem;
    border-bottom: 0.01rem solid #eee;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .one1 span{
    font-size: 0.3rem;
  }
  .one1 span:nth-child(2){
    margin: 0 1.2rem;
  }
  .cnetv{
  }
  .wind1{
    position: absolute;
    width: 100%;
    min-height: 100%;
    background: #e6e6e6;
    z-index: -10;

  }
  .tabs{
    display: flex;
    height: 1rem;
    line-height: 1rem;
    border-bottom: 1px solid #e6e6e6;
    background: #fff;
  }
    .tab-item{
      flex: 1;
      text-align: center;
      font-size: 0.3rem
    }
    .tab-itemactive{
      border-bottom:1px solid #f57397;
    }
    .content{
      display: flex;
      justify-content: space-between;
      padding: 0.2rem;
      flex-wrap: wrap;
    }
    .product{
      width: 3.5rem;
      background: white;
      padding-bottom:0.2rem;
      margin-bottom: 0.2rem;
    }
    .product img{
      width: 100%;
      height: 2.5rem;
    }
    .product-title{
      margin-top: 0.2rem;
      font-size: 0.3rem;
      padding: 0 0.2rem;
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
    }
    .product-tip{
      display: flex;
      justify-content: space-between;
      font-size: 0.25rem;
      margin-top: 0.2rem;
      padding: 0 0.2rem;
      align-items: center;
    }
    .product-tip span:nth-child(2){
      border: 1px solid #f54375;
      padding: 0.05rem;
      border-radius: 0.2rem;
      color: #f54375;
    }
    .product-bottom{
      display: flex;
      font-size: 0.25rem;
      margin-top: 0.2rem;
      padding: 0 0.2rem;
      align-items: center;
    }
    .product-bottom span:nth-child(1){
      font-size: 0.3rem;
      color: #f54375;
      font-weight: bold;
    }
    .product-bottom span:nth-child(2){
      margin-left: 0.2rem;
      color: #ccc;
      text-decoration:line-through ;
    }
</style>
